<template>
  <a-card :bordered="false">
    <a-spin :spinning="spinning" style="margin-bottom: 100px">
      <h2>大内淘</h2>
      <a-form-model :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-model-item label="填写手机号" required>
          <a-textarea v-model="queryParam.addPhone" placeholder="请输入手机号 多个手机号,分开" class="edit-imput" style="min-height: 120px" />
          <a @click="addClcik">加入</a>
        </a-form-model-item>

        <a-form-model-item label="填写手机号" required>
          <a-input v-model="queryParam.cancelPhone" placeholder="请输入手机号" class="edit-imput" />
          <a @click="cancelClick">取消</a>
        </a-form-model-item>

        <a-form-model-item label="填写手机号" required>
          <a-input v-model="queryParam.aboutPhone" @focus="onMyFocus" placeholder="请输入手机号" class="edit-imput" />
          <a @click="searchClcik">查询</a>
          <span v-if="washFlag" class="current">已存在大内淘中</span>
          <span v-if="washFlag === false" class="current">不存在大内淘中</span>
        </a-form-model-item>
        <a-divider />
        <h2>TOP200导购</h2>
        <a-form-model-item label="填写手机号" required>
          <a-textarea v-model="params.addPhone" placeholder="请输入手机号 多个手机号,分开" class="edit-imput" style="min-height: 120px" />
          <a @click="addGuideClcik">加入</a>
        </a-form-model-item>

        <a-form-model-item label="填写手机号" required>
          <a-input v-model="params.cancelPhone" placeholder="请输入手机号" class="edit-imput" />
          <a @click="cancelGuideClick">取消</a>
        </a-form-model-item>

        <a-form-model-item label="填写手机号" required>
          <a-input v-model="params.aboutPhone" placeholder="请输入手机号" @focus="onFocus" class="edit-imput" />
          <a @click="searchGuideClcik">查询</a>

          <span v-if="topFlag" class="current">已存在TOP200导购中</span>
          <span v-if="topFlag === false" class="current">不存在TOP200导购中</span>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-card>
</template>
<script>
import { setBoxEbSalsList, delBoxEbSalsList, queryBoxEbSalsList, setWriteCreateBoxGuide, queryWriteCreateBoxGuide, delWriteCreateBoxGuide } from '@/api/box/marketing'
export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      queryParam: {
        addPhone: '',
        cancelPhone: '',
        aboutPhone: ''
      },
      params: {
        addPhone: '',
        cancelPhone: '',
        aboutPhone: ''
      },
      spinning: false,
      topFlag: null,
      washFlag: null
    }
  },
  methods: {
    searchClcik() {
      if (!this.queryParam.aboutPhone) {
        this.$message.error('请输入手机号！')
        return
      }
      queryBoxEbSalsList(this.queryParam.aboutPhone).then(res => {
        if (res.code === 0) {
          this.washFlag = res.data
        }
      })
    },
    addClcik() {
      if (!this.queryParam.addPhone) {
        this.$message.error('请输入手机号！')
        return
      }
      let params = {
        requestData: this.queryParam.addPhone.split(',')
      }
      setBoxEbSalsList(params).then(res => {
        if (res.code === 0) {
          this.$message.success('加入成功！')
          this.queryParam.addPhone = []
        }
      })
    },
    cancelClick() {
      if (!this.queryParam.cancelPhone) {
        this.$message.error('请输入手机号！')
        return
      }
      delBoxEbSalsList(this.queryParam.cancelPhone).then(res => {
        if (res.code === 0) {
          this.$message.success('取消成功！')
          this.queryParam.cancelPhone = ''
        }
      })
    },
    searchGuideClcik() {
      if (!this.params.aboutPhone) {
        this.$message.error('请输入手机号！')
        return
      }
      queryWriteCreateBoxGuide(this.params.aboutPhone).then(res => {
        if (res.code === 0) {
          this.topFlag = res.data
        }
      })
    },
    addGuideClcik() {
      if (!this.params.addPhone) {
        this.$message.error('请输入手机号！')
        return
      }
      let params = {
        requestData: this.params.addPhone.split(',')
      }
      setWriteCreateBoxGuide(params).then(res => {
        if (res.code === 0) {
          this.$message.success('加入成功！')
          this.params.addPhone = []
        }
      })
    },
    cancelGuideClick() {
      if (!this.params.cancelPhone) {
        this.$message.error('请输入手机号！')
        return
      }
      delWriteCreateBoxGuide(this.params.cancelPhone).then(res => {
        if (res.code === 0) {
          this.$message.success('取消成功！')
          this.params.cancelPhone = ''
        }
      })
    },
    onFocus() {
      this.topFlag = ''
    },
    onMyFocus() {
      this.washFlag = ''
    }
  }
}
</script>
<style lang="less" scoped>
.edit-imput {
  width: 400px;
  margin-right: 40px;
}
.current {
  margin-left: 24px;
  color: red;
}
</style>
